<template>
  <div class="ma-content-block">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :span="8">
          <a-form-item label="视频名称" field="name">
            <a-input v-model="searchForm.name" placeholder="请输入视频名称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="转码状态" field="transcode_status">
            <sa-select v-model="searchForm.transcode_status" dict="video_up" placeholder="请选择转码状态" allow-clear />
          </a-form-item>
        </a-col>
        
      </template>
      <template #operationAfterExtend="{ record }">
        <a-link v-if="record.transcode_status === 1" type="primary" @click="preview(record)">预览</a-link>
        <a-link type="primary" @click="edit(record)"><icon-edit />编辑</a-link>
        <a-popconfirm
          content="确定要删除该数据吗?"
          position="bottom"
          @ok="deleteAction(record)">
          <a-link type="primary" v-auth="options.delete.auth || []">
            <icon-delete /> 删除
          </a-link>
        </a-popconfirm>
      </template>
    </sa-table>

    <!-- 编辑表单 -->
    <up-video ref="upVideoRef" @success="refresh"  @close="showUpVideo = false" />
    <video-preview ref="videoPreviewRef" />
    <Edit ref="editRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import API_LIVE from '@/api/live/live'
import UpVideo from './UpVideo.vue'
import VideoPreview from './videoPreview.vue'
import Edit from './edit.vue'

// 引用定义
const crudRef = ref()
const upVideoRef = ref()
const videoPreviewRef = ref()
const editRef = ref()


const showUpVideo = ref(false)

// 搜索表单
const searchForm = ref({
  name: '',
  transcode_status: '' // 0.新增排队中，1.转码成功，2.转码失败，3转码中
})

const transcode_status_type = [
  { label: '新增排队中', value: 0 },
  { label: '转码成功', value: 1 },
  { label: '转码失败', value: 2 },
  { label: '转码中', value: 3 },
]

const changeStatus = async (status, id) => {
  const response = await api.changeStatus({ id, status })
  if (response.code === 200) {
    Message.success(response.message)
    crudRef.value.refresh()
  }
}

// SaTable 基础配置
const options = reactive({
  api: API_LIVE.listVideo,
  rowSelection: { showCheckedAll: true },
  add: {
    show: true,
    text: '上传视频',
    func: async () => {
      upVideoRef.value?.open()
    },
  },
  
  delete: {},
})

const deleteAction = async (record) => {
  const resp = await API_LIVE.removeVideo({record_id: record.record_id})
  if (resp.code === 200) {
    Message.success(`删除成功！`)
    crudRef.value?.refresh()
  }
}

const edit = async (record) => {
  editRef.value?.open(record)
}

const preview = async (record) => {
  videoPreviewRef.value?.open(record.record_id)
}

// SaTable 列配置
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 50 },
  { title: '视频名称', dataIndex: 'name', width: 150 },
  { title: '视频时长', dataIndex: 'duration', width: 80 },
  { title: '视频大小', dataIndex: 'storage', width: 80 },
  { title: '添加时间', dataIndex: 'created_at', type: 'date', width: 130 },
  { title: '到期时间', dataIndex: 'deleted_time', type: 'date', width: 130 },
  { title: '转码状态', dataIndex: 'transcode_status', type: 'dict', dict: 'video_up', width: 100},
])


// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  refresh()
})
</script>
